<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>06.v-if</title>
	</head>

	<body>


		<!-- 条件渲染:
		1.v-if
		写法:
		(1).v-if="表达式"
		(2).v-else-if="表达式"(3).v-else="表达式"适用于:切换频率较低的场景。
		特点:不展示的DOM元素直接被移除。
		注意:v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
		2.v-show
		写法:v-show="表达式"
		适用于:切换频率较高的场景。
		特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
		3.备注:使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。 -->

		<div id="app">
			<input type="button" value="显示隐藏" v-on:click="q2">
			{{food}}
			<h1 v-show="food">v-show原理是操控display</h1>
			<h1 v-if="food">v-if通过操作dom元素进行 删除和显示</h1>
			<!-- template 模板标签不会出现在html结构里 和v-if的配合使用 -->
			<template v-else="food">
				<h1>5555</h1>
				<h1>5555</h1>
			</template>

		</div>
		<script src="./vue-v2.7.13.js"></script>

		<script>
			//设置元素的显示或隐藏 
			//v-if通过操作dom元素进行 删除和添加显示
			var app = new Vue({
				el: "#app", //Id #id class .name  标签 div
				//输出的数据
				data: {
					food: true,
				},
				//对象 方法
				methods: {
					q2: function() {
						this.food = !this.food
						console.log(document.getElementById('app').innerHTML)
					},

				}
			})
		</script>

	</body>

</html>
